<template>
	<div style="height:100%">
		<cl-crud @load="onLoad">
			<template #table-column-ractivityTime="{scope}">
				<div>
					{{ scope.row.startTime | dateFormatLine2 }} --
					{{ scope.row.endTime | dateFormatLine2 }}
				</div>
			</template>
			<template #table-column-status="{scope}">
				<el-tag v-if="scope.row.status == 1" type="success">启用</el-tag>
				<el-tag type="info" v-else>禁用</el-tag>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import moment from 'moment';
import goldThreshold from './components/goldThreshold';
export default {
	data() {
		return {};
	},
	components: {
		goldThreshold
	},

	mounted() {},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.integralMall.bwbtActivity)
				.set('table', {
					columns: [
						{
							prop: 'ractivityTime',
							label: '活动时间',
							align: 'center',
							width: 200
						},
						{
							prop: 'periods',
							label: '活动期数',
							align: 'center'
						},
						{
							prop: 'virtualPrize',
							label: '虚拟奖池',
							align: 'center'
						},
						{
							prop: 'prizeScale',
							label: '额外奖励比例',
							align: 'center'
						},
						{
							prop: 'remark',
							label: '备注',
							align: 'center',
							emptyText: '无'
						},
						{
							prop: 'status',
							label: '状态',
							align: 'center'
						}
					],
					op: {
						layout: ['edit']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '140px'
					},
					items: [
						{
							prop: 'ractivityTime',
							label: '活动时间',
							value: [
								moment().format('YYYY-MM-DD'),
								moment()
									.add(1, 'day')
									.format('YYYY-MM-DD')
							],
							component: {
								name: 'el-date-picker',
								props: {
									type: 'daterange'
								}
							},

							rules: [
								{
									required: true,
									message: '请选择时间'
								}
							]
						},
						{
							prop: 'periods',
							label: '活动期数',
							value: 1,
							component: {
								name: 'el-input-number',
								props: {
									min: 0,
									disabled: false
								}
							},
							rules: [
								{
									required: true,
									message: '请输入活动期数',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'virtualPrize',
							label: '虚拟奖池',
							value: 1,
							component: {
								name: 'el-input-number',
								attrs: {
									min: 0
								}
							},
							rules: [
								{
									required: true,
									message: '请输入虚拟奖池',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'prizeScale',
							label: '额外奖励比例(%)',
							value: 1,
							component: {
								name: 'el-input-number',
								attrs: {
									min: 0
								}
							},
							rules: [
								{
									required: true,
									message: '请输入额外奖励比例',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'goldStage',
							component: {
								name: 'goldThreshold-c',
								data() {
									return {
										value2: '',
										time: ''
									};
								},

								props: {
									value: null
								},
								watch: {
									value(val) {
										let list = JSON.parse(val);
										list.map(e => {
											if (e.mdId == 0) {
												e.mdId = '';
											}
										});
										this.value2 = list;
									}
								},
								created() {
									this.time = app.getData(
										'upsert.items[prop:ractivityTime].value'
									);
								},
								methods: {
									input(val) {
										this.$emit('input', val);
									}
								},

								render() {
									return (
										<goldThreshold
											value={this.value2}
											time={this.time}
											onInput={this.input}></goldThreshold>
									);
								}
							}
						},
						{
							prop: 'status',
							label: '状态',
							value: 2,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '启用',
										value: 1
									},
									{
										label: '禁用',
										value: 2
									}
								]
							}
						},
						{
							prop: 'remark',
							label: '备注',
							component: {
								name: 'el-input'
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'add-btn'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('open', async (isEdit, data) => {
					if (isEdit) {
						app.setForm('ractivityTime', [
							moment(Number(data.startTime) * 1000).format('YYYY-MM-DD'),
							moment(Number(data.endTime) * 1000).format('YYYY-MM-DD')
						]);
						app.setData('upsert.items[prop:periods].component.props.disabled', true);
					} else {
						app.setData('upsert.items[prop:periods].component.props.disabled', false);
					}
				})
				.on('submit', async (isEdit, data, { next }) => {
					let startTime = moment(
						moment(data.ractivityTime[0]).format('YYYY-MM-DD 00:00:00')
					).unix();
					let endTime = moment(
						moment(data.ractivityTime[1]).format('YYYY-MM-DD 23:59:59')
					).unix();

					let list = JSON.parse(data.goldStage);
					list.map(item => {
						if (item.isPrizeGood == '2') {
							item.mdId = 0;
						}
					});
					delete data.ractivityTime;
					data.goldStage = JSON.stringify(list);

					next({
						...data,
						startTime,
						endTime
					});
				})
				.done();
			app.refresh();
		}
	}
};
</script>
<style lang="scss" scoped></style>
